import React from 'react';
import './ListParent.css';
import ItemChild from './ItemChild';

class ListParent extends React.Component {
  // 组件状态（数据）
  state = {
    list: [
      {
        id: 1,
        name: '超级好吃的棒棒糖',
        price: 18.8,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 2,
        name: '超级好吃的大鸡腿',
        price: 34.2,
        info: '开业大酬宾，全场7折',
      },
      {
        id: 3,
        name: '超级无敌的冰激凌',
        price: 14.2,
        info: '开业大酬宾，全场6折',
      },
    ],
  };

  // 父组件定义一个函数
  kan = (id, amount) => {
    console.log(id, amount);
    // 修改对应商品的价格
    const newList = this.state.list.map((item) => {
      // 修改对应的砍价商品
      if (item.id === id) {
        return {
          ...item,
          price: parseFloat(item.price - amount).toFixed(2),
        };
      }
      return item;
    });

    // 更新页面
    this.setState({
      list: newList,
    });
  };

  render() {
    return (
      // 父组件
      <div className="parent">
        <h1>父组件</h1>
        {/* 把下面UI抽离为子组件 */}
        {this.state.list.map((item) => {
          return (
            // <ItemChild
            //   key={item.id}
            //   name={item.name}
            //   price={item.price}
            //   info={item.info}
            // />

            <ItemChild key={item.id} {...item} kan={this.kan} />
          );
        })}
      </div>
    );
  }
}
export default ListParent;
